<template>
  <div class="listEtworkarticleMain">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
        <Feature :titleName="'网案收藏'">
          <slot>
            <el-skeleton :rows="1" animated v-if="skeletonBotType" v-for="item in 5" class="zylMB30"/>
            <template v-for="(item, index) in networkworksCollection">
              <div class="listEtworkarticleLeftListMain" @click="jump(item.neturl)">
                <div class="leftListMainTitle zylSpace zylTransition"><span>{{ index+1 }}</span>{{ item.title}}</div>
              </div>
            </template>
          </slot>
        </Feature>
      </el-col>
      <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
        <Feature :titleName="'网案列表'">
          <slot>
            <slot>
              <div class="linksTypeMain">收藏的一些网络上面的案例</div>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" v-if="skeletonListType" v-for="item in 12">
                  <el-skeleton animated class="zylMB30">
                    <template #template>
                      <el-skeleton-item variant="p" class="skeletonMb10"/>
                      <div class="zylSkeletonText">
                        <el-skeleton-item variant="p" class="skeletonMb10"/>
                        <el-skeleton-item variant="p" class="skeletonMb10"/>
                        <el-skeleton-item variant="p" class="skeletonMb10"/>
                      </div>
                    </template>
                  </el-skeleton>
                </el-col>
                <template v-for="(item, index) in networkworksList">
                  <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                    <div class="listEtworkarticleRightListMain" @click="jump(item.neturl)">
                      <div class="rightListMainTitle zylSpace zylTransition">{{ item.title }}</div>
                      <div class="rightListMainLabe zylSpace">{{ item.lable }}</div>
                      <div class="rightListMainTime">{{ item.creationtime }}</div>
                      <div class="rightListMainText" v-html="item.brief"></div>
                    </div>
                  </el-col>
                </template>
              </el-row>
            </slot>
          </slot>
        </Feature>

        <div class="zylPaginationMain zylMB10">
          <el-pagination background :total="pagList.total" :page-size="pagList.pageSize" @current-change="handlePageChange" layout="prev, pager, next"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 网络好文
  name: 'networkarticleIndex',
  components: {
    Feature
  },
  data () {
    return {
      networkworksList: [],
      networkworksCollection: [],
      // 分页
      pagList: {
        total: 0,
        pageNum: 1,
        pageSize: 12,
      },
      skeletonBotType: true,
      skeletonListType: true,
    };
  },
  mounted () {
    this.getZylNetworkAll();
    this.getZylNetworkCollection();
  },
  methods: {
    // 查询网络案例
    getZylNetworkAll () {
      let params = {
        nettype: '网案',
        state: '是',
        title: '',
        pageNum: this.pagList.pageNum,
        pageSize: this.pagList.pageSize,
      };
      Interface.getZylNetworkAll(params).then(res => {
        if (res.status === 200) {
          this.skeletonListType = false;
          this.networkworksList = res.data.list;
          this.pagList.total = res.data.total;
        }
      })
    },

    // 查询已收藏的网络案例
    getZylNetworkCollection () {
      let params = {
        nettype: '网案',
        state: '是',
        collection: '是',
      };
      Interface.getZylNetworkCollection(params).then(res => {
        if (res.status === 200) {
          this.skeletonBotType = false;
          this.networkworksCollection = res.data;
        }
      })
    },

    // 分页监听
    handlePageChange (val) {
      this.pagList.pageNum = val;
      this.getZylNetworkAll();
    },

    // 跳转
    jump (item) {
      window.open(item, '_blank');
    },
  },
}
</script>
